{% load static %}
<link rel="stylesheet" href="{% static 'crop/css/imagecrop.css' %}"/>

<div class="container">
  <div class="imageBox">
    <div class="thumbBox"></div>
    <div class="spinner" style="display: none"></div>
  </div>
  <div class="action"> 
    <!-- <input type="file" id="file" style=" width: 200px">-->
    <div class="new-contentarea tc"> <a href="javascript:void(0)" class="upload-img">
      <label for="upload-file">upload picture...</label>
      </a>
      <input type="file" class="" name="upload-file" id="upload-file" accept="image/jpeg,image/jpg,image/png"/>
    </div>
    <input type="button" id="btnCrop" class="Btnsty_peyton" value="OK">
    <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >
    <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
  </div>
  <div class="cropped"></div>
</div>

<script type="text/javascript" src="{% static 'crop/js/jquery-1.11.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'crop/js/cropbox-min.js' %}"></script>
<script type="text/javascript" src="{% static 'common/js/csrf.js' %}"></script>
<script type="text/javascript">
$(window).load(function() {
	var options =
	{
		thumbBox: '.thumbBox',
		spinner: '.spinner',
		imgSrc: ''
	}
	var cropper = $('.imageBox').cropbox(options);
	var img="";
	$('#upload-file').on('change', function(){
		var reader = new FileReader();
		reader.onload = function(e) {
			options.imgSrc = e.target.result;
			cropper = $('.imageBox').cropbox(options);
			getImg();
		}
		reader.readAsDataURL(this.files[0]);
		//this.files = [];
		//getImg();
	})

	$('#btnCrop').on('click', function(){
		$.ajax({
			url: '{% url "account:my_headimage" %}',
			type: 'POST',
			data: {"img": img},
			success: function(e){
			    parent.location.reload();
			},
		});
	})
	function getImg(){
		img = cropper.getDataURL();
		$('.cropped').html('');
		$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 5px #7E7E7E;"><p>180px*180px</p>');
		$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 5px #7E7E7E;"><p>128px*128px</p>');
		$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 5px #7E7E7E;" ><p>64px*64px</p>');
		}
		
	$(".imageBox").on("mouseup",function(){
 		getImg();
  		});
		
		
	$('#btnZoomIn').on('click', function(){
		cropper.zoomIn();
	})
	$('#btnZoomOut').on('click', function(){
		cropper.zoomOut();
	})
});
</script>
